import React, { Component, Suspense, lazy } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
// import styles from './index.module.scss'
import WLoading from '../../../components/loading'
import { updateWebNavIndex } from '../../../store/app/actions'

const StyleList = lazy(() => import('./list'))
const StyleDetail = lazy(() => import('./detail'))

interface StateInterface {

}

interface PropsInterface {
}

class WebStudy extends Component<PropsInterface, StateInterface> {

  componentDidMount() {
    updateWebNavIndex('3')
  }

  render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
    return (
      <Suspense fallback={<WLoading height='calc(100vh - 162px)' />}>
        <Switch>
          <Route exact path="/web/product" component={StyleList} />
          <Route path="/web/product/detail" component={StyleDetail} />
          <Redirect to="/web/product"></Redirect>
        </Switch>
      </Suspense>
    );
  }
}

export default WebStudy;
